Frontend MediaStreami piirangute rakendamine: meedia salvestamise seadistamine

Veebi meedia API annab arendajatele võimaluse pääseda ligi kasutaja kaamerale ja mikrofonile otse brauserist. See võimekus avab laia valiku võimalusi, alates videokonverentsidest ja otseülekannetest kuni interaktiivsete mängude ja liitreaalsuse kogemusteni. Siiski, pelgalt meediavoole ligipääsemisest sageli ei piisa. Et meedia API võimsust tõeliselt rakendada, vajavad arendajad peeneteralist kontrolli meedia salvestamise protsessi üle. Siin tulevadki mängu MediaStreami piirangud (MediaStream Constraints).

See põhjalik juhend süveneb MediaStreami piirangute maailma, pakkudes detailset selgitust, kuidas neid frontendis rakendada meedia salvestamise seadete konfigureerimiseks. Uurime erinevaid audio- ja videopiirangute valikuid, demonstreerime praktilisi näiteid ja pakume parimaid praktikaid robustsete ja kohandatavate meediarakenduste ehitamiseks.

MediaStreami piirangute mõistmine

MediaStreami piirangud on võtme-väärtuse paaride kogum, mis defineerivad MediaStreami (audio- või videoandmete voo) soovitud omadused. Need piirangud edastatakse argumendina getUserMedia() meetodile, mis taotleb luba kasutaja kaamerale ja/või mikrofonile ligipääsuks. Brauser püüab esitatud piiranguid rahuldada, valides parima saadaoleva meediaallika, mis vastab määratud kriteeriumitele.

getUserMedia() meetod tagastab Promise'i, mis laheneb MediaStreami objektiga, kui kasutaja annab loa ja piirangud on võimalik rahuldada. Kui kasutaja keeldub loast või piiranguid ei saa täita, lükatakse Promise tagasi veateatega.

getUserMedia() kasutamise põhisüntaks koos piirangutega on järgmine:

            navigator.mediaDevices.getUserMedia({ audio: audioConstraints, video: videoConstraints })
  .then(stream => { /* Kasuta voogu */ })
  .catch(error => { /* Käsitle viga */ });
            

              
                Copy
              
            
          

audioConstraints ja videoConstraints objektid defineerivad vastavalt heli- ja videoradade spetsiifilised nõuded. Uurime saadaolevaid piiranguvalikuid üksikasjalikumalt.

Helipiirangud

Helipiirangud võimaldavad teil kontrollida helisisendi erinevaid aspekte, näiteks:

• deviceId: Määrab täpse helisisendseadme, mida kasutada.
• groupId: Määrab seadmete rühma, kuhu sisendseade kuulub. Kasulik konkreetsete omadustega seadmete valimiseks (nt konkreetne tootja).
• autoGainControl: Lubab või keelab automaatse võimenduse kontrolli, mis reguleerib automaatselt helisisendi taset.
• channelCount: Määrab helikanalite arvu (nt 1 mono, 2 stereo).
• echoCancellation: Lubab või keelab kaja summutamise, mis vähendab kajade mõju helisisendis.
• latency: Määrab helisisendi soovitud latentsusaja.
• noiseSuppression: Lubab või keelab müra summutamise, mis vähendab taustamüra helisisendis.
• sampleRate: Määrab helisisendi soovitud diskreetimissageduse (nt 44100 Hz).
• sampleSize: Määrab helisisendi soovitud diskreetimissügavuse (nt 16 bitti).
• volume: Määrab helisisendi soovitud helitugevuse (väärtus vahemikus 0 kuni 1).

Iga piirangut saab määrata lihtsa väärtusena (nt echoCancellation: true) või keerukama objektina, millel on exact ja ideal omadused. exact omadus määrab täpse väärtuse, mis peab vastama, samas kui ideal omadus määrab eelistatud väärtuse, mida brauser peaks püüdma rahuldada. Näiteks:

            const audioConstraints = {
  echoCancellation: { exact: true },
  noiseSuppression: { ideal: true }
};
            

              
                Copy
              
            
          

See näide taotleb, et kaja summutamine oleks lubatud ja et brauser ideaalis lubaks ka müra summutamise.

Praktilised helipiirangute näited

Siin on mõned praktilised näited helipiirangute kasutamisest:

Konkreetse mikrofoni valimine

            navigator.mediaDevices.enumerateDevices()
  .then(devices => {
    const microphone = devices.find(device => device.kind === 'audioinput' && device.label.includes('Minu Mikrofon'));
    if (microphone) {
      const audioConstraints = { deviceId: { exact: microphone.deviceId } };
      navigator.mediaDevices.getUserMedia({ audio: audioConstraints, video: false })
        .then(stream => { /* Kasuta voogu */ })
        .catch(error => { /* Käsitle viga */ });
    } else {
      console.error('Mikrofoni ei leitud');
    }
  });
            

              
                Copy
              
            
          

See näide loetleb esmalt kõik saadaolevad meediaseadmed ja valib seejärel mikrofoni, mille sildis sisaldub "Minu Mikrofon". Seejärel kasutab see deviceId piirangut, et määrata, et tuleks kasutada ainult seda mikrofoni.

Müra summutamise ja kaja tühistamise lubamine

            const audioConstraints = {
  noiseSuppression: { ideal: true },
  echoCancellation: { ideal: true }
};

navigator.mediaDevices.getUserMedia({ audio: audioConstraints, video: false })
  .then(stream => { /* Kasuta voogu */ })
  .catch(error => { /* Käsitle viga */ });
            

              
                Copy
              
            
          

See näide taotleb, et müra summutamine ja kaja tühistamine oleksid ideaalis lubatud. Brauser püüab neid piiranguid rahuldada, kuid see ei pruugi alati olla võimalik, sõltuvalt kasutaja heliriistvara võimalustest.

Konkreetse diskreetimissageduse määramine

            const audioConstraints = {
  sampleRate: { exact: 48000 }
};

navigator.mediaDevices.getUserMedia({ audio: audioConstraints, video: false })
  .then(stream => { /* Kasuta voogu */ })
  .catch(error => { /* Käsitle viga */ });
            

              
                Copy
              
            
          

See näide taotleb, et helisisendi diskreetimissagedus oleks täpselt 48000 Hz. See on kasulik rakenduste jaoks, mis nõuavad helitöötluseks kindlat diskreetimissagedust.

Videopiirangud

Videopiirangud võimaldavad teil kontrollida videosisendi erinevaid aspekte, näiteks:

• deviceId: Määrab täpse videosisendseadme, mida kasutada.
• groupId: Määrab seadmete rühma, kuhu sisendseade kuulub.
• width: Määrab videovoo soovitud laiuse.
• height: Määrab videovoo soovitud kõrguse.
• aspectRatio: Määrab videovoo soovitud kuvasuhte.
• frameRate: Määrab videovoo soovitud kaadrisageduse (kaadrit sekundis).
• facingMode: Määrab kaamera soovitud suuna (nt "user" esikaamera, "environment" tagakaamera).
• resizeMode: Määrab, kuidas videovoogu tuleks suurust muuta, kui taotletud mõõtmeid ei saa täpselt sobitada (nt "crop-and-scale", "preserve-aspect-ratio").

Sarnaselt helipiirangutele saab ka videopiiranguid määrata lihtsate väärtustena või keerukamate objektidena, millel on exact ja ideal omadused.

Praktilised videopiirangute näited

Siin on mõned praktilised näited videopiirangute kasutamisest:

Konkreetse kaamera valimine

            navigator.mediaDevices.enumerateDevices()
  .then(devices => {
    const camera = devices.find(device => device.kind === 'videoinput' && device.label.includes('Minu Kaamera'));
    if (camera) {
      const videoConstraints = { deviceId: { exact: camera.deviceId } };
      navigator.mediaDevices.getUserMedia({ audio: false, video: videoConstraints })
        .then(stream => { /* Kasuta voogu */ })
        .catch(error => { /* Käsitle viga */ });
    } else {
      console.error('Kaamerat ei leitud');
    }
  });
            

              
                Copy
              
            
          

See näide loetleb esmalt kõik saadaolevad meediaseadmed ja valib seejärel kaamera, mille sildis sisaldub "Minu Kaamera". Seejärel kasutab see deviceId piirangut, et määrata, et tuleks kasutada ainult seda kaamerat.

Konkreetse eraldusvõime määramine

            const videoConstraints = {
  width: { ideal: 1280 },
  height: { ideal: 720 }
};

navigator.mediaDevices.getUserMedia({ audio: false, video: videoConstraints })
  .then(stream => { /* Kasuta voogu */ })
  .catch(error => { /* Käsitle viga */ });
            

              
                Copy
              
            
          

See näide taotleb, et videovoo eraldusvõime oleks ideaalis 1280x720 pikslit. Brauser püüab neid piiranguid rahuldada, kuid võib valida teise eraldusvõime, kui taotletud eraldusvõimet kaamera ei toeta.

Esikaamera kasutamine

            const videoConstraints = {
  facingMode: { exact: 'user' }
};

navigator.mediaDevices.getUserMedia({ audio: false, video: videoConstraints })
  .then(stream => { /* Kasuta voogu */ })
  .catch(error => { /* Käsitle viga */ });
            

              
                Copy
              
            
          

See näide taotleb esikaamera kasutamist. facingMode piirangut saab seada ka väärtusele 'environment', et kasutada tagakaamerat.

Konkreetse kaadrisageduse määramine

            const videoConstraints = {
  frameRate: { ideal: 30 }
};

navigator.mediaDevices.getUserMedia({ audio: false, video: videoConstraints })
  .then(stream => { /* Kasuta voogu */ })
  .catch(error => { /* Käsitle viga */ });
            

              
                Copy
              
            
          

See näide taotleb, et videovoo kaadrisagedus oleks ideaalis 30 kaadrit sekundis. Kõrgemad kaadrisagedused annavad üldiselt sujuvama video, kuid nõuavad ka rohkem töötlemisvõimsust.

Täiustatud piirangute tehnikad

Piirangute komplektid

Mõnikord võite soovida pakkuda mitut piirangute komplekti, võimaldades brauseril valida parima valiku, mis vastab teie nõuetele. Selleks saate ühe objekti asemel esitada piiranguobjektide massiivi.

            const constraints = [
  { width: { exact: 1920 }, height: { exact: 1080 } },
  { width: { exact: 1280 }, height: { exact: 720 } },
  { width: { exact: 640 }, height: { exact: 480 } }
];

navigator.mediaDevices.getUserMedia({ video: constraints, audio: false })
  .then(stream => { /* Kasuta voogu */ })
  .catch(error => { /* Käsitle viga */ });
            

              
                Copy
              
            
          

Selles näites püüab brauser rahuldada piiranguid nende esitamise järjekorras. Esmalt proovib see saada videovoo eraldusvõimega 1920x1080. Kui see pole võimalik, proovib see 1280x720 ja nii edasi.

applyConstraints() kasutamine

Meetod applyConstraints() võimaldab teil dünaamiliselt uuendada olemasoleva MediaStreamTracki piiranguid. See on kasulik muutuvate tingimuste või kasutaja eelistustega kohanemiseks, ilma et peaks kogu MediaStreami uuesti läbirääkimisi pidama.

            navigator.mediaDevices.getUserMedia({ video: true, audio: false })
  .then(stream => {
    const videoTrack = stream.getVideoTracks()[0];
    const constraints = { frameRate: { ideal: 60 } };

    videoTrack.applyConstraints(constraints)
      .then(() => {
        console.log('Kaadrisagedus uuendatud');
      })
      .catch(error => {
        console.error('Kaadrisageduse uuendamine ebaõnnestus:', error);
      });
  })
  .catch(error => { /* Käsitle viga */ });
            

              
                Copy
              
            
          

See näide hangib esmalt videoga MediaStreami. Seejärel võtab see voost esimese videoraja ja kutsub välja applyConstraints(), et uuendada kaadrisagedus 60 kaadrini sekundis.

Veakäsitlus

On ülioluline käsitleda vigu, mis võivad ilmneda getUserMedia() või applyConstraints() kutsumisel. Nende meetodite tagastatud Promise võidakse tagasi lükata erinevate vigadega, sealhulgas:

• NotAllowedError: Kasutaja keeldus kaamerale või mikrofonile ligipääsu loast.
• NotFoundError: Taotletud tüüpi meediaradu ei leitud.
• NotReadableError: Kasutajaagent ei pääse riistvarale ligi või ei saa muul viisil meediaseadmele juurdepääsu.
• OverconstrainedError: Määratud piiranguid ei saanud täita. See viga sisaldab constraint omadust, mis näitab, milline piirang vea põhjustas.
• SecurityError: Ilmnes turvaviga. See võib juhtuda, kui lehte ei serveerita üle HTTPS-i.
• TypeError: Ilmnes tüübiviga. See võib juhtuda, kui piirangute objekt on kehtetu.

Nõuetekohane veakäsitlus on hea kasutajakogemuse pakkumiseks ja võimalike probleemide silumiseks hädavajalik.

            navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then(stream => { /* Kasuta voogu */ })
  .catch(error => {
    switch (error.name) {
      case 'NotAllowedError':
        console.error('Luba keelatud');
        // Kuvage kasutajale teade, mis selgitab, et luba on vajalik
        break;
      case 'NotFoundError':
        console.error('Kaamerat või mikrofoni ei leitud');
        // Kuvage kasutajale teade, mis osutab, et kaamera või mikrofon pole saadaval
        break;
      case 'NotReadableError':
        console.error('Kaamera või mikrofon on hõivatud');
        // Kuvage kasutajale teade, mis osutab, et kaamera või mikrofon on kasutusel teise rakenduse poolt
        break;
      case 'OverconstrainedError':
        console.error('Piiranguid ei saanud täita:', error.constraint);
        // Kuvage kasutajale teade, mis osutab, et taotletud piiranguid ei saanud rahuldada
        break;
      case 'SecurityError':
        console.error('Turvaviga');
        // Kuvage kasutajale teade, mis osutab, et ilmnes turvaviga
        break;
      case 'TypeError':
        console.error('Tüübiviga');
        // Kuvage kasutajale teade, mis osutab, et piirangute objekt on kehtetu
        break;
      default:
        console.error('Ilmnes tundmatu viga:', error);
        // Kuvage kasutajale üldine veateade
        break;
    }
  });
            

              
                Copy
              
            
          

Parimad praktikad

Siin on mõned parimad praktikad MediaStreami piirangutega töötamiseks:

• Kasutage enumerateDevices(), et saada nimekiri saadaolevatest meediaseadmetest. See võimaldab teil pakkuda kasutajatele valikut kaamerate ja mikrofonide vahel.
• Kasutage exact piiranguid säästlikult. exact piirangud võivad olla liiga piiravad ja takistada brauseril sobiva meediaallika leidmist. Kasutage selle asemel ideal piiranguid ja laske brauseril valida parim saadaolev valik.
• Käsitlege vigu korralikult. Pakkuge kasutajale informatiivseid veateateid, et aidata neil mõista, mis valesti läks.
• Testige oma rakendust erinevates seadmetes ja brauserites. MediaStreami piirangud võivad erinevatel platvormidel käituda erinevalt.
• Arvestage kasutaja privaatsusega. Taotlege juurdepääsu kaamerale ja mikrofonile ainult siis, kui see on vajalik, ja olge läbipaistev selle kohta, kuidas te meediavoogu kasutate.
• Rakendage sujuvat allakäiku (graceful degradation). Kui taotletud piiranguid ei saa täita, pakkuge tagavaramehhanismi, mis võimaldab kasutajal jätkata rakenduse kasutamist vähendatud funktsionaalsusega. Näiteks, kui taotletud eraldusvõime pole saadaval, kasutage selle asemel madalamat eraldusvõimet.
• Optimeerige jõudlust. Kõrged eraldusvõimed ja kaadrisagedused võivad tarbida palju töötlemisvõimsust ja ribalaiust. Valige piirangud, mis on sobivad rakenduse ja kasutaja seadme jaoks.

Globaalsed kaalutlused

Globaalsele publikule meediarakenduste arendamisel on oluline arvestada järgmiste teguritega:

• Erinevad võrgutingimused. Erinevates maailma paikades olevatel kasutajatel võivad olla erinevad võrgukiirused ja latentsusajad. Kujundage oma rakendus kohanema erinevate võrgutingimustega. Kaaluge adaptiivse bitikiirusega voogedastuse kasutamist, et kohandada video kvaliteeti vastavalt saadaolevale ribalaiusele.
• Erinevad seadmete võimalused. Kasutajad võivad kasutada laia valikut seadmeid, millel on erinev töötlemisvõimsus ja kaamera võimalused. Valige piirangud, mis on sihtrühmale sobivad.
• Kultuurilised erinevused. Olge teadlik kultuurilistest erinevustest meedia kasutamisel. Näiteks võivad mõned kultuurid olla privaatsusprobleemide suhtes tundlikumad kui teised.
• Juurdepääsetavus. Veenduge, et teie rakendus oleks juurdepääsetav puuetega kasutajatele. Pakkuge videotele subtiitreid ja veenduge, et kasutajaliides oleks klaviatuuriga ligipääsetav.
• Lokaliseerimine. Lokaliseerige oma rakendus mitmesse keelde, et jõuda laiema publikuni.

Kokkuvõte

MediaStreami piirangud on võimas tööriist meedia salvestamise konfigureerimiseks frontendis. Mõistes saadaolevaid piiranguvalikuid ja järgides parimaid praktikaid, saavad arendajad ehitada robustseid ja kohandatavaid meediarakendusi, mis pakuvad suurepärast kasutajakogemust. Ärge unustage rahvusvahelisele publikule arendades arvesse võtta globaalseid tegureid.

MediaStreami piirangute valdamisega saate avada veebi meedia API täieliku potentsiaali ning luua uuenduslikke ja kaasahaaravaid meediakogemusi kasutajatele üle kogu maailma. See hõlmab rakendusi alates hajutatud meeskondade koostöös toimuvast videotöötlusest kuni reaalajas tõlketeenusteni videokonverentside ajal ja isegi isikupärastatud liitreaalsuse kogemusteni, mis on kohandatud konkreetsetele kultuurilistele kontekstidele. Võimalused on tõeliselt piiramatud.